<template>
  <fieldset>
    <legend>tab案例</legend>
    <button
      v-for="item in list"
      :key="item.url"
      @click="listFn(item)"
      :class="[{'active': item.url===move}]"
    >{{item.name}}</button>
    <div class="contain" :is="move"></div>
  </fieldset>
</template>

<script>
import home from "./home.vue";
import email from "./email.vue";
import mine from "./mine.vue";
export default {
  data() {
    return {
      move: "home",
      // list:["home","email","mine"]
      list: [
        {
          url: "home",
          name: "首页",
        },
        {
          url: "email",
          name: "邮箱",
        },
        {
          url: "mine",
          name: "个人中心",
        },
      ],
    };
  },

  components: {
    home,
    email,
    mine,
  },
  methods: {
    listFn(item) {
      this.move = item.url;
      console.log(item);
    },
  },
};
</script>

<style>
.contain {
  border: 1px solid;
  margin: 0;
}
.active {
  background-color: aqua;
}
</style>